<template>
	<!-- 各种排行进度条 -->
	<view class="ranking-progress-box">
		<view class="progress-list">
			<view class="progress-item" v-for="(rl, index) in rankItems" :key="index">
				<!-- unitType:1 start -->
				<view v-if="unitType == 1" class="unit-type-1 flex-row">
					<view class="rank-item-name">{{ index + 1 }}.{{ rl.name }}</view>
					<view class="progress-box"><progress :percent="rl.percentage" activeColor="#097AFF" stroke-width="8" backgroundColor="#ffffff" /></view>
					<view class="unit-type-txt">
						{{ rl.num }}
						<text>{{ unitTxt }}</text>
					</view>
				</view>
				<!-- unitType:1 end -->
				<!-- unitType:2 start -->
				<view v-if="unitType == 2" class="unit-type-2">
					<view class="rank-item-name">{{ rl.name }}</view>
					<view class="flex-row">
						<view class="progress-box"><progress :percent="rl.percentage" activeColor="#097AFF" stroke-width="8" backgroundColor="#e6f1ff" /></view>
						<view class="unit-type-txt">
							{{ rl.num }}
							<text>{{ unitTxt }}</text>
						</view>
					</view>
				</view>
				<!-- unitType:2 end -->
			</view>
		</view>
		<view class="show-items" v-show="showRotate">
			<image class="show-image" :class="{ 'rotate-active': rotateActive }" src="../../static/img/double-show.png" @click="showMore"></image>
		</view>
	</view>
</template>

<script>
export default {
	name: 'rankingProgress',
	props: {
		topTitle: String,
		topSubTitle: String,
		unitType: {
			type: Number,
			default: () => {
				return 1; //1，文本和进度条在两行，2文本和进度条在一行
			}
		},
		rankList: {
			type: Array,
			required: true
		},
		unitTxt: {
			type: String,
			required: true
		}, //单位
		totalBase: Number //// 如果没有给占比
	},
	watch: {
		rankList(val) {
			this.setData(val);
		}
	},
	data() {
		return {
			showRotate: true,
			rotateActive: false,
			rankItems: []
		};
	},
	created() {
		this.setData(this.rankList);
	},
	methods: {
		setData(val) {
			if (val.length > 10) {
				this.rankItems = val.slice(0, 10);
				this.showRotate = true;
			} else {
				this.rankItems = val;
				this.showRotate = false;
			}
			// 如果没有给占比
			// this.rankItems = this.rankItems.map((item, index) => {
			// 	item.percentage = parseInt((item.num / this.totalBase) * 100);
			// 	return item;
			// });
		},
		showMore() {
			this.rotateActive = !this.rotateActive;
			if (this.rotateActive) {
				this.rankItems = this.rankList;
			} else {
				this.rankItems = this.rankList.slice(0, 10);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.ranking-progress-box {
	.progress-item {
		padding-bottom: 42rpx;
	}
	.rank-item-name {
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #666666;
		font-weight: 400;
		width: 532rpx;
		height: 34rpx;
		line-height: 34rpx;
		margin-bottom: 2rpx;
		float: left;
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.unit-type-txt {
		width: 90rpx;
		height: 34rpx;
		line-height: 34rpx;
		font-family: PingFangSC-Medium;
		font-size: 24rpx;
		color: #333333;
		text-align: right;
		font-weight: 500;
	}
	.unit-type-2 {
		.flex-row {
			width: 100%;
			align-items: center;
			.progress-box {
				width: 532rpx;
			}
		}
	}
	.unit-type-1 {
		align-items: center;
		.rank-item-name {
			width: 152rpx;
			margin-right: 20rpx;
		}
		.progress-box {
			width: 340rpx;
		}
		.unit-type-txt {
			width: 110rpx;
		}
	}
	.show-items {
		display: flex;
		width: 100%;
		height: 32rpx;
		justify-content: center;
		align-items: center;
		padding-bottom: 20rpx;
		.show-image {
			width: 32rpx;
			height: 32rpx;
			cursor: pointer;
		}
		.rotate-active {
			transform: rotate(180deg);
		}
	}
}
</style>
